<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <header class="panel-heading">
                待拨打列表
            </header>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-6 col-md-12">
                        <form class="form-inline" role="form" onsubmit="return false;">
                            <div class="form-group">
                                <label class="sr-only" for="Search">请输入客户名称/电话号码</label>
                                <input type="text" class="form-control" id="Search" placeholder="请输入客户名称/电话号码">
                            </div>
                            <button id="SearchBtn" type="button" class="btn btn-success">搜索</button>
                        </form>
                    </div>
                </div>
                <div class="row">

                    <div class="col-lg-12">
                        <table id="DataList" lay-filter="DataList" class="table"></table>

                        <script type="text/html" id="HeadToolBar">
                            <div class="layui-btn-container">
                                <button class="layui-btn layui-btn-sm layui-btn-primary " lay-event="delete"><i
                                        class="icon-trash"></i> 删除选中
                                </button>
                            </div>
                        </script>

                        <script type="text/html" id="ToolBar">
<!--                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del">删除</i> </a>-->
                            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="del" title="删除"><i class="icon-trash"></i> </a>
                        </script>
                    </div>
                </div>


            </div>
        </section>

    </div>
</div>

<script>
    layui.use(['table', 'layer', 'jquery'], function () {
        var table = layui.table,
            layer = layui.layer,
            $ = layui.$;

        //待拨打数据表格
        var tableIns = table.render({
            elem: '#DataList'
            , height: 'full-250'
            , url: '/index.php/user/Client/mb_CallList' //数据接口
            // , page: true //开启分页
            , toolbar: '#HeadToolBar' //开启头部工具栏，并为其绑定左侧模板
            , page: {
                theme: '#ff6c60'
            }
            , where:{
                Keyword:$('#Search').val()
            }
            , limit: 100
            , limits: [100, 200, 300, 400, 500]
            , cols: [[ //表头 總寬度1670
                {type: 'checkbox', fixed: 'left'}
                // , {field: 'ID', title: 'ID', width: 80, sort: true, fixed: 'left'}
                , {field: 'ClientName', title: '客户名称', width: 250, fixed: 'left'}
                , {field: 'Contacts', title: '联系人', width: 250, fixed: 'left'}
                , {field: 'IsCalledStr', title: '状态', width: 200, sort: true}
                , {field: 'TimeCreated', title: '时间', sort:true}
                , {title: '編輯', width: 100, align: 'center', toolbar: '#ToolBar', fixed: 'right'}
            ]]
        });

        //监听行工具事件
        table.on('tool(DataList)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if (layEvent === 'del') {
                //删除
                var fields = {
                    Type: 'UserCalls',
                    IDs: data.ID
                };
                global.post('/index.php/user/Event/mb_Delete', fields, function (msg) {
                    if (msg['code'] == ErrCode_Normal) {
                        layer.msg(msg['msg'], {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        }, function () {
                            tableIns.reload();
                        });
                    } else mb_OnMessage(msg);
                });
            }
        });

        //头工具栏事件
        table.on('toolbar(DataList)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);

            if(checkStatus.data.length == 0){
                layer.msg('请选择客户', {icon: 2});
                return false
            }

            switch (obj.event) {
                case 'delete':
                    //刪除選中
                    var data = checkStatus.data;
                    var ids = '';
                    for (var i = 0; i < data.length; i++) {
                        ids += data[i].ID;
                        if (i != data.length - 1) ids += ','
                    }
                    var fields = {
                        Type: 'Client',
                        IDs: ids
                    };
                    global.post('/index.php/user/Event/mb_Delete', fields, function (msg) {
                        if (msg['code'] == ErrCode_Normal) {
                            layer.msg(msg['msg'], {
                                offset: '15px'
                                , icon: 1
                                , time: 1000
                            }, function () {
                                // window.location.reload();
                                tableIns.reload();
                            });
                        } else mb_OnMessage(msg);
                    });
                    break;
                default:
                    break;
            }
        });

        //搜寻按钮按下
        $('#SearchBtn').bind('click', function () {
            var Keyword = $('#Search').val();
            if (Keyword == '') {
                layer.msg('请输入客户名称/电话号码', {icon: 2});
                return false;
            }
            table.reload('DataList', {
                where: {
                    Keyword: Keyword
                }
            });
        });
        $('#Search').bind('keypress', function (event) {
            if (event.keyCode == "13") {
                //需要处理的事情
                var Keyword = $('#Search').val();
                if (Keyword == '') {
                    layer.msg('请输入客户名称/电话号码', {icon: 2});
                    return false;
                }
                table.reload('DataList', {
                    where: {
                        Keyword: Keyword
                    }
                });
            }
        });
    });

</script>